<template>
  <div class="NewsDetail">
    <!-- <van-nav-bar
      title=""
      left-arrow
      @click-left="backHome"
    />-->
    <nav-bar></nav-bar>
    <div class="wrap">
      <div class="NewsDetail-title">{{ news.title }}</div>
      <div class="NewsDetail-note">
        <div class="source">来源：{{ news.subhead }}</div>
        <span>|</span>
        <div class="date">{{ news.createTime }}</div>
      </div>
      <div class="NewsDetail-content rich v-html-img" v-html="news.content">
        <!-- <img src="../assets/img/news/newsDetail01.png" alt="">
        <p>
          国务院发布《国务院关于同意设立江西内陆开放型经济试验区的批复》，同意设立江西内陆开放型经济试验区（以下简称试验区），试验区建设总体方案由国家发展改革委印发。
        </p>
        <p>
          批复指出，建设要以习近平新时代中国特色社会主义思想为指导，全面贯彻党的十九大和十九届二中、三中、四中全会精神，坚持新发展理念，坚持推动高质量发展，坚持以供给侧结构性改革为主线，主动融入共建“一带一路”，积极参与长江经济带发展，对接粤港澳大湾区建设、长三角一体化发展，以体制机制改革为重点，挖掘区域合作潜力，推动资源要素自由高效流动，加快构建内外并举、全域统筹、量质双高的开放格局，努力走出一条内陆省份双向高水平开放，以开放促改革、促发展、促创新的新路子。
        </p>
        <img src="../assets/img/news/newsDetail02.png" alt="">
        <p>
          批复要求，江西省人民政府要切实加强对试验区建设的组织领导，完善工作机制，落实工作责任，抓紧编制并落实好具体实施方案，有力有序推进试验区发展。涉及的重要政策和重大建设项目要按程序报批。
        </p>
        <p>
          批复指出，国务院有关部门要按照职能分工，加强对试验区建设发展的指导，在规划编制、政策实施、项目布局、体制创新等方面给予积极支持，帮助解决试验区发展过程中遇到的困难和问题。国家发展改革委要加强统筹协调，做好跟踪督促，研究新情况、解决新问题、总结新经验，重大事项及时向国务院报告。
        </p>-->
      </div>
    </div>
    <collIcon @handColl="handColl" :id="news.favoritesId"></collIcon>
  </div>
</template>

<script>
import navBar from "@/components/NavBar";
import collIcon from "@/components/collIcon/index.vue";
export default {
  components: {
    navBar,
    collIcon,
  },
  name: "NewsDetail",
  data() {
    return {
      imgUrl: config.imgUrl,
      newsId: 0,
      news: {},
    };
  },
  methods: {
    handColl() {
      this.$request({
        url: "/favorites/addMyFavorites",
        data: { newsId: this.newsId },
        method: "post",
      }).then((rsp) => {
        if (rsp.code === 200) {
          console.log(rsp.data);
          this.getNews(this.newsId);
          this.$toast.success(rsp.content);
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    },
    backHome() {
      this.$router.back();
    },
    getNews(newsId) {
      this.$request({
        url: "/news/selectNewsFIRST",
        data: { newsId: newsId },
        method: "post",
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.news = rsp.data;
          console.log(rsp.data);
          this.news.accessory = JSON.parse(this.news.accessory);
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    },
  },
  mounted() {
    this.newsId = this.$route.query.newsId;
    this.getNews(this.newsId);
  },
};
</script>
<style scoped>
.rich >>> img {
  width: 100%;
  height: 100%;
}
</style>
<style lang='scss'>
@import "../assets/css/base";

.NewsDetail {
  &-title {
    margin-top: px2rem(46);
    font-size: px2rem(40);
    color: #000000;
    font-weight: 500;
    line-height: px2rem(60);
  }
  &-note {
    margin-top: px2rem(20);
    margin-bottom: px2rem(35);
    color: #808080;
    font-size: px2rem(20);
    display: flex;
    & > span {
      padding-left: px2rem(10);
      padding-right: px2rem(10);
    }
  }
  &-content {
    font-size: px2rem(24);
    color: #333333;
    line-height: 1.8;
    & > img {
      width: 100%;
      border-radius: px2rem(5);
      margin-bottom: px2rem(20);
    }
    // &p{
    //   font-size: px2rem(24);
    //   color: #333333;
    //   line-height: 1.8;
    //   margin-bottom: px2rem(30);
    // }
  }
}
</style>
